// mixins for grid system
// ------------------------
/* === Grid === */
.row {
	overflow: hidden;
	margin-left: -4%;
	> [class*="col-"], > [class*="tablet-"] {
		box-sizing: border-box;
		float: left;
	}
	&.no-gutter {
		margin-left: 0;
	}
}
@cols: 5, 10, 15, 20, 25, 100/3, 40, 50, 60, 100*(2/3), 75, 80, 85, 90, 95, 100;
.row {
	.-(@i: length(@cols)) when (@i > 0) {
	@divider: e(extract(@cols, @i));
	@className: `Math.floor(@{divider})`;
	@n: `100/parseFloat(@{divider})`;
	@n-1: @n - 1;
	@gutter: `4.0`;
	@d: `(100-@{gutter}*@{n})/@{n}`;
	.col-@{className} {
		width: ~"@{d}%";
		margin-left: ~"@{gutter}%";
	}
	&.no-gutter {
		@d: `100/@{n}`;
		.col-@{className} {
			width: ~"@{d}%";
			margin: 0;
		}
	}
	.-((@i - 1));
} .-;
}
@media all and (min-width:768px) {
	.row {
		margin-left: -2%;
	}
	.row {
		.-(@i: length(@cols)) when (@i > 0) {
		@divider: e(extract(@cols, @i));
		@className: `Math.floor(@{divider})`;
		@n: `100/parseFloat(@{divider})`;
		@n-1: @n - 1;
		@gutter: `2.0`;
		@d: `(100-@{gutter}*@{n})/@{n}`;
		.col-@{className} {
			width: ~"@{d}%";
			margin-left: ~"@{gutter}%";
		}
		&.no-gutter {
			@d: `100/@{n}`;
			.col-@{className} {
				width: ~"@{d}%";
				margin: 0;
			}
		}
		.-((@i - 1));
	} .-;
	}
	.row {
		.-(@i: length(@cols)) when (@i > 0) {
		@divider: e(extract(@cols, @i));
		@className: `Math.floor(@{divider})`;
		@n: `100/parseFloat(@{divider})`;
		@n-1: @n - 1;
		@gutter: `2.0`;
		@d: `(100-@{gutter}*@{n})/@{n}`;
		.tablet-@{className} {
			width: ~"@{d}%";
			margin-left: ~"@{gutter}%";
		}
		&.no-gutter {
			@d: `100/@{n}`;
			.tablet-@{className} {
				width: ~"@{d}%";
				margin: 0;
			}
		}
		.-((@i - 1));
	} .-;
	}
}
